<html>

<head>
    <!--<%@ include file="../../common/common.jsp"%>-->
    <!--<%@ include file="code.jsp"%>-->
    <meta charset="utf-8"/>
    <meta name="renderer" content="ie-comp"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>


    <title>视频预览</title>
    <link href="../../../fav.ico" rel="shortcut icon"/>

    <!--<%@ include file="../../../common/commons.jsp"%>-->
    <!-- 以下为通用脚本 -->
    <!-- 基础样式 -->
    <link href="css/monitor.css" rel="stylesheet"/>
    <link href="css/grids.css" rel="stylesheet"/>
    <link href="css/reset.css" rel="stylesheet"/>
    <link href="css/base.css" rel="stylesheet"/>
    <link href="css/baseV1.2.0.css" rel="stylesheet"/>
    <link href="css/ui.grid.css" rel="stylesheet">
    <!-- 弹出框 -->
    <link href="css/pop.css" rel="stylesheet"/>
    <link href="css/themes.css" rel="stylesheet"/>
    <link href="css/replay.css" rel="stylesheet"/>

    <!--<link href="css/person.css" rel="stylesheet"/>-->

    <script src="plugins/messages_zh_cn.js"></script>
    <script src="plugins/jquery.js"></script>
    <script src="plugins/jquery-ui.js"></script>

    <script src="plugins/sea.js"></script>
    <script src="plugins/pop.js"></script>
    <script src="plugins/jquery.cookie.js"></script>
    <script src="plugins/jquery.uniform.js"></script>

    <script src="plugins/jquery.spinner.js"></script>

    <!-- ztree -->
    <script src="plugins/jquery.ztree.core.js"></script>
    <script src="plugins/jquery.ztree.excheck.js"></script>
    <script src="plugins/jquery.ztree.exedit.js"></script>
    <script src="plugins/jquery.ztree-override.js"></script>

    <script src="js/preview.js"></script>
    <script src="js/errorHandler.js"></script>
    <style type="text/css">
        .consoleDiv {
            width: 180px;
            height: 400px;
        }

        .div-none {
            display: none;
        }

        .button-setting {
            margin: 10px;
            text-align: center;
        }
    </style>
    <!--[if lt IE 9]>
    <link href="css/ie.css" rel="stylesheet"/>
    <![endif]-->

</head>

<body class="monitor">
<div class="wrapper grid-s9m0e6">
    <div class="col-main">
        <div class="main-wrap">
            <div class="monitor-container">
                <div class="grids">
                    <div class="ocx-container">
                        <div class="win_container" data-index="1" id="preview_1"
                             style="width: 100%; height: 100%;" name="ocx_1">

                        </div>
                        <div class="win_container" data-index="2" id="preview_2"
                             style="width: 100%; height: 100%;" name="ocx_2">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sub hasPanel">
        <div id="tabContent" style="bottom: 270px;"
             class="tab-container tab-grey ui-tabs ui-widget ui-widget-content ui-corner-all">
            <ul class="tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
                    <a href="#monResource">实时预览</a>
                </li>
                <li id="playbackTab">
                    <a onclick="playbackHtml()">监控回放</a>
                </li>
            </ul>

            <div id="monResource" class="treeview">
                <ul id="zTreea" class="ztree"></ul>
            </div>
            <!--<div id="settingParam" class="treeview">-->
                <!--<div class="button-setting">-->
                    <!--<a class="buttonW bBlue" id="paramset" style="display: inline-block;width: 116px">全局参数设置</a>-->
                <!--</div>-->

                <!--<div class="button-setting">-->
                    <!--<a class="buttonW bBlue" href="javascript:void(0);" id="stopone"-->
                       <!--style="display: inline-block;width: 116px"-->
                       <!--onclick="stopOne()">单一停止预览</a>-->
                <!--</div>-->

                <!--<div class="button-setting">-->
                    <!--<a class="buttonW bBlue" href="javascript:void(0);" style="display: inline-block;width: 116px"-->
                       <!--onclick="stopAll()">全部停止预览</a>-->
                <!--</div>-->

                <!--<div class="button-setting">-->
                    <!--<div class="textBlue">-->
                        <!--<h4>设置当前窗口：</h4>-->
                    <!--</div>-->
                    <!--<select id="windowselect" onclick="remember('windowselect')"-->
                            <!--onchange="selectWindow()">-->
                        <!--<option value="00" selected="selected">请设置当前窗口</option>-->
                        <!--<option value="0">0</option>-->
                        <!--<option value="1">1</option>-->
                        <!--<option value="2">2</option>-->
                        <!--<option value="3">3</option>-->
                        <!--<option value="4">4</option>-->
                        <!--<option value="5">5</option>-->
                        <!--<option value="6">6</option>-->
                        <!--<option value="7">7</option>-->
                        <!--<option value="8">8</option>-->
                        <!--<option value="9">9</option>-->
                        <!--<option value="10">10</option>-->
                        <!--<option value="11">11</option>-->
                        <!--<option value="12">12</option>-->
                        <!--<option value="13">13</option>-->
                        <!--<option value="14">14</option>-->
                        <!--<option value="15">15</option>-->
                    <!--</select>-->
                <!--</div>-->

                <!--<div class="button-setting">-->
                    <!--<div class="textBlue">-->
                        <!--<h4>设置窗口布局：</h4>-->
                    <!--</div>-->
                    <!--<select id="windowTypeSelect"-->
                            <!--onchange="selectWindowType()">-->
                        <!--<option value="1">请选择窗口布局</option>-->
                        <!--<option value="1">1*1</option>-->
                        <!--<option value="2">2*2</option>-->
                        <!--<option value="3">3*3</option>-->
                        <!--<option value="5">4*4</option>-->
                    <!--</select>-->
                <!--</div>-->
                <!--&lt;!&ndash;<div class="button-setting">&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="textBlue">&ndash;&gt;-->
                <!--&lt;!&ndash;<h4>设置控件主题：</h4>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;<select id="ocxSkinSelect"&ndash;&gt;-->
                <!--&lt;!&ndash;onchange="selectOcxSkinType()">&ndash;&gt;-->
                <!--&lt;!&ndash;<option value="Red">请选择控件主题</option>&ndash;&gt;-->
                <!--&lt;!&ndash;<option value="Red">红</option>&ndash;&gt;-->
                <!--&lt;!&ndash;<option value="Blue">蓝</option>&ndash;&gt;-->
                <!--&lt;!&ndash;<option value="Gree">绿</option>&ndash;&gt;-->
                <!--&lt;!&ndash;</select>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->

                <!--&lt;!&ndash;<div class="button-setting">&ndash;&gt;-->
                <!--&lt;!&ndash;<a class="buttonW bBlue" id="deviceTalkOpen" href="#" style="display: inline-block;width: 116px">开启语音对讲</a>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="button-setting">&ndash;&gt;-->
                <!--&lt;!&ndash;<a class="buttonW bBlue" id="deviceTalkClose" href="#" style="display: inline-block;width: 116px">关闭语音对讲</a>&ndash;&gt;-->

                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="button-setting">&ndash;&gt;-->
                <!--&lt;!&ndash;<a class="buttonW bBlue" id="playSoundOpen" href="#" style="display: inline-block;width: 116px">开启声音</a>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="button-setting">&ndash;&gt;-->
                <!--&lt;!&ndash;<a class="buttonW bBlue" id="playSoundClose" href="#" style="display: inline-block;width: 116px">关闭声音</a>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="button-setting">&ndash;&gt;-->
                <!--&lt;!&ndash;<a class="buttonW bBlue" id="clearAll" href="#" style="display: inline-block;width: 116px">清空提示文本</a>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="button-setting">&ndash;&gt;-->
                <!--&lt;!&ndash;<textarea style="display: inline-block;width: 180px; height: 230px" name="console" id="console"></textarea>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--</div>-->
        </div>
        <div class="playing-container" style="height: 270px;border-top:1px solid #ccc;">
            <!--<div class="treeview">-->
                <div class="button-setting">
                    <a class="buttonW bBlue" id="paramset" style="display: inline-block;width: 116px">全局参数设置</a>
                </div>

                <div class="button-setting">
                    <a class="buttonW bBlue" href="javascript:void(0);" id="stopone"
                       style="display: inline-block;width: 116px"
                       onclick="stopOne()">单一停止预览</a>
                </div>

                <div class="button-setting">
                    <a class="buttonW bBlue" href="javascript:void(0);" style="display: inline-block;width: 116px"
                       onclick="stopAll()">全部停止预览</a>
                </div>

                <div class="button-setting">
                    <div class="textBlue">
                        <h4>设置当前窗口：</h4>
                    </div>
                    <select id="windowselect" onclick="remember('windowselect')"
                            onchange="selectWindow()">
                        <option value="00" selected="selected">请设置当前窗口</option>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                    </select>
                </div>

                <div class="button-setting">
                    <div class="textBlue">
                        <h4>设置窗口布局：</h4>
                    </div>
                    <select id="windowTypeSelect"
                            onchange="selectWindowType()">
                        <option value="1">请选择窗口布局</option>
                        <option value="1">1*1</option>
                        <option value="2">2*2</option>
                        <option value="3">3*3</option>
                        <option value="5">4*4</option>
                    </select>
                </div>
                <!--<div class="button-setting">-->
                <!--<div class="textBlue">-->
                <!--<h4>设置控件主题：</h4>-->
                <!--</div>-->
                <!--<select id="ocxSkinSelect"-->
                <!--onchange="selectOcxSkinType()">-->
                <!--<option value="Red">请选择控件主题</option>-->
                <!--<option value="Red">红</option>-->
                <!--<option value="Blue">蓝</option>-->
                <!--<option value="Gree">绿</option>-->
                <!--</select>-->
                <!--</div>-->

                <!--<div class="button-setting">-->
                <!--<a class="buttonW bBlue" id="deviceTalkOpen" href="#" style="display: inline-block;width: 116px">开启语音对讲</a>-->
                <!--</div>-->
                <!--<div class="button-setting">-->
                <!--<a class="buttonW bBlue" id="deviceTalkClose" href="#" style="display: inline-block;width: 116px">关闭语音对讲</a>-->

                <!--</div>-->
                <!--<div class="button-setting">-->
                <!--<a class="buttonW bBlue" id="playSoundOpen" href="#" style="display: inline-block;width: 116px">开启声音</a>-->
                <!--</div>-->
                <!--<div class="button-setting">-->
                <!--<a class="buttonW bBlue" id="playSoundClose" href="#" style="display: inline-block;width: 116px">关闭声音</a>-->
                <!--</div>-->
                <!--<div class="button-setting">-->
                <!--<a class="buttonW bBlue" id="clearAll" href="#" style="display: inline-block;width: 116px">清空提示文本</a>-->
                <!--</div>-->
                <!--<div class="button-setting">-->
                <!--<textarea style="display: inline-block;width: 180px; height: 230px" name="console" id="console"></textarea>-->
                <!--</div>-->
            <!--</div>-->

        </div>
    </div>

</div>


<!-- Dialog start -->

<div style="display: none;">
    <div id="tips" class="dialog" title="提示">
        <div class="tab-container tab-vertical">
            <span>视频控件初始化失败，请检查是否安装插件。</span></br>
            <a href='http://122.227.217.10:90/download/WebCtrl_V4.1_106530_B20190124_C.exe'>点击下载插件</a>
        </div>
    </div>
</div>

<div style="display: none;">
    <div id="settingDialog" class="dialog" title="参数设置">
        <div class="tab-container tab-vertical">
            <dl class="tabs">
                <dt>
                    基本设置
                </dt>
                <dd>
                    <ul>
                        <li class="active"><a name="param" id="picCut"
                                              onclick="showDetail(this)" href="javascript:void(0);">抓图设置</a></li>
                        <li><a name="param" id="videoCut" onclick="showDetail(this)"
                               href="javascript:void(0);">录像剪辑</a></li>
                        <li><a name="param" id="vodioproperty"
                               onclick="showDetail(this)" href="javascript:void(0);">性能计划</a></li>
                    </ul>
                </dd>
            </dl>
            <div class="tab-content">
                <!-- 抓图参数 -->
                <div class="form-inline" id="picCutparam">
                    <fieldset>
                        <legend>抓图设置</legend>
                        <div class="control-group">
                            <label class="control-label">保存格式：</label>
                            <div class="controls">
                                <div>
										<span class="check"><label><input
                                                data-value="jpeg" type="radio" name="capture.format" checked id="jpeg"/><span>jpeg</span>
										</label> <label><input data-value="bmp" type="radio"
                                                               name="capture.format" id="bmp"/><span>bmp</span> </label> </span>
                                </div>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">保存路径：</label>
                            <div class="controls">
                                <div class="input-append">
                                    <input id="captureSavePath" value="" readonly type="text"> <a
                                        id="btnSelectCaptureSavePath" class="buttonS bDefault"
                                        href="#" onclick="browseFolder('captureSavePath')">选择</a>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <!-- 抓图参数 -->

                <!--录像参数-->

                <div class="form-inline  div-none" id="videoCutparam">
                    <fieldset>
                        <legend>录像剪辑</legend>
                        <div class="control-group">
                            <label class="control-label">分包类型：</label>
                            <div class="controls">
                                <div>
										<span class="check"> <!-- <label><input
												data-value="time" type="radio" id="timeOption"
												name="capture.type" checked onchange="getOptions(this)"><span>时间</span>
										</label>  --> <label><input data-value="size"
                                                                    type="radio" id="sizeOption" name="capture.type"
                                                                    checked><span>大小</span>
										</label> </span>
                                </div>
                            </div>
                        </div>
                        <div class="control-group" name="capture.option" id="sizeOptions">
                            <label class="control-label">分包大小：</label>
                            <div class="controls">
                                <select name="videoClibsSize" id="videoClibsSize">
                                    <option value="256" selected="selected">256MB</option>
                                    <option value="512">512MB</option>
                                    <option value="1024">1024MB</option>
                                    <option value="2048">2048MB</option>
                                </select>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">保存路径：</label>
                            <div class="controls">
                                <div class="input-append">
                                    <input id="videoClibsSavePath" value="" readonly type="text"> <a
                                        id="btnSelectVideoClibsSavePath" class="buttonS bDefault"
                                        href="#" onclick="browseFolder('videoClibsSavePath')">选择</a>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <!-- 性能参数-->

                <div class="form-inline div-none" id="vodiopropertyparam">
                    <fieldset>
                        <legend>性能计划配置</legend>
                        <div>

                            <div class="control-group">
                                <label class="control-label">解码性能：</label>
                                <div class="controls">
                                    <div id="videoParameter" style="width: 235px">
                                        <span class="floatL">最小延时</span>
                                        <div id="slide" class="uRange floatL ml5 mr10"
                                             style="clear: none; width: 120px;"></div>
                                        <span class="floatL">最好流畅</span>
                                        <div class="clear textC" id="slideValue">5</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <!-- 性能参数 -->

            </div>
        </div>
    </div>
</div>

<!-- Dialog end -->
<div style="display: none;">
    <div id="codeDialog" class="dialog" title="参数设置">
        <div class="tab-container tab-vertical">
            <xmp id="code"></xmp>
        </div>
    </div>
</div>

<!-- 以下为当前页脚本 -->
<!-- 以下为当前页脚本 -->
<script type="text/javascript" src="js/realtimeplay.js"></script>
</body>
</html>